<template>
  <el-container id="configBox">
    <el-aside v-show="isNetwork">
      <div class="folderTree" @click="witchNetWorkClick(1)">
          <img src="../assets/img/config/wifi.png">
          <span :class="isNetwork&&witchNetwork==1? 'is-active':''">全部网络</span>
        </div>
        <div class="folderTree" @click="witchNetWorkClick(2)">
          <img src="../assets/img/config/neiwang.png">
          <span :class="isNetwork&&witchNetwork==2? 'is-active':''">内网配置</span>
        </div>
        <div class="folderTree" @click="witchNetWorkClick(3)">
          <img src="../assets/img/config/hulianwangoff.png">
          <span :class="isNetwork&&witchNetwork==3? 'is-active':''">公网配置</span>
        </div>
    </el-aside>
    <el-aside v-show="isPerson">
      <p>使用右键操作组织架构</p>
        <el-tree
          v-if="isTree"
          :highlight-current="true"
          :data="company"
          :accordion="true"
          :default-expand-all="false"
          @node-contextmenu="nodeRightClick"
          :props="defaultProps"
          @node-expand="nodeexpand"
          :default-expanded-keys="expandKey"
          @node-click="handleNodeClick"
          @node-collapse="nodeexpand"
          node-key="id"
          ref="tree"
          class="tree"
        ></el-tree>
    </el-aside>
    <el-container>
      <el-header>
        <div class="folderTree" @click="handleNetWorkClick">
          <span :class="isNetwork? 'is-active':''">网络配置</span>
        </div>
        <div class="folderTree" @click="handlePersonClick">
          <span :class="isPerson? 'is-active':''">人员配置</span>
        </div>
        <el-button class="refresh" @click="refresh" icon="el-icon-refresh" plain></el-button>
      </el-header>
      <el-main>
        <el-container class="network" v-show='isNetwork'>
          <el-header style="border:1px solid #F6F6F6;height: 54px;background: white">
            <div class="buttonLeft">
              <el-button type="primary" class="addConfig" @click="addHandle">添加配置信息</el-button>
            </div>
            <div class="buttonRight">
              <!--<el-input-->
              <!--class="currentSearch"-->
              <!--placeholder="在当前目录搜索"-->
              <!--prefix-icon="el-icon-search"-->
              <!--v-model="currentSearch">-->
              <!--</el-input>-->
            </div>
          </el-header>
          <el-main>
            <el-table
              size="small"
              :row-style="rowClass"
              :data="configList"
              v-loading="listLoading"
              element-loading-text="拼命加载中"
              @cell-click="handleCellClick"
              @selection-change="selsChange"
              style="width: 100%;"
            >
              <el-table-column prop="ip" label="节点IP">
                <template slot-scope="scope">
                  <div class="folder-box">
                    <span>{{scope.row.ip}}</span>
                    <div class="folder-box-options">
                      <span style="cursor: pointer; padding-right: 10px" @click.stop @click="editHandle(scope.row)">
                        <i class="fa fa-pencil-square-o" aria-hidden="true"></i> 修改
                      </span>
                      <span style="cursor: pointer;" @click.stop @click="deleteHandle(scope.row)">
                        <i class="fa fa-trash-o" aria-hidden="true"></i> 删除
                      </span>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="apiPort" label="上传端口"></el-table-column>
              <el-table-column prop="gatewayPort" label="路由端口"></el-table-column>
              <el-table-column prop="remarks" label="备注"></el-table-column>
            </el-table>
          </el-main>
          <el-dialog id="addConfig" title="添加配置信息" :visible.sync="addConfigVisible">
            <el-tabs v-model="activeName">
              <el-tab-pane label="内网节点配置" name="0">
                <el-form
                  :model="addForm"
                  status-icon
                  label-width="80px"
                  :rules="addFormRules"
                  ref="addForm"
                >
                  <el-form-item label="内网IP" prop="ip">
                    <el-input v-model="addForm.ip" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="上传端口" prop="apiPort">
                    <el-input v-model="addForm.apiPort" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="路由端口" prop="gatewayPort">
                    <el-input v-model="addForm.gatewayPort" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="备注" prop="remarks">
                    <el-input v-model="addForm.remarks" :maxlength="300" clearable></el-input>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="公网节点配置" name="1">
                <el-form
                  :model="addForm"
                  status-icon
                  label-width="80px"
                  :rules="addFormRules"
                  ref="addForm"
                >
                  <el-form-item label="公网IP" prop="ip">
                    <el-input v-model="addForm.ip" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="上传端口" prop="apiPort">
                    <el-input v-model="addForm.apiPort" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="路由端口" prop="gatewayPort">
                    <el-input v-model="addForm.gatewayPort" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="备注" prop="remarks">
                    <el-input v-model="addForm.remarks" :maxlength="300" clearable></el-input>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
            <div slot="footer" class="dialog-footer">
              <el-button size="mini" @click="addConfigVisible = false">取 消</el-button>
              <el-button
                size="mini"
                type="primary"
                v-loading="addSubmitLoading"
                @click="addConfigSubmit"
              >提 交</el-button>
            </div>
          </el-dialog>
          <el-dialog title="修改配置信息" :visible.sync="editConfigVisible">
            <el-form
              :model="editForm"
              status-icon
              label-width="80px"
              :rules="addFormRules"
              ref="addForm"
            >
              <el-form-item label="节点IP" prop="ip">
                <el-input v-model="editForm.ip" clearable></el-input>
              </el-form-item>
              <el-form-item label="上传端口" prop="apiPort">
                <el-input v-model="editForm.apiPort" :maxlength="5" clearable></el-input>
              </el-form-item>
              <el-form-item label="路由端口" prop="gatewayPort">
                <el-input v-model="editForm.gatewayPort" :maxlength="5" clearable></el-input>
              </el-form-item>
              <el-form-item label="备注" prop="remarks">
                <el-input v-model="editForm.remarks" :maxlength="125  " clearable></el-input>
              </el-form-item>
              <el-form-item label="网络类型">
                <el-select v-model="editForm.type1" placeholder="请选择节点网络类型">
                  <el-option label="内网" value="0"></el-option>
                  <el-option label="公网" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button size="mini" @click="editConfigVisible = false">取 消</el-button>
              <el-button
                size="mini"
                type="primary"
                v-loading="editSubmitLoading"
                @click="editConfigSubmit"
              >提 交</el-button>
            </div>
          </el-dialog>
        </el-container>
        <el-container class='person' v-show="isPerson">
        <el-header class="toolbar">
          <el-button class="bt1" @click="addUser">添加人员</el-button>
          <el-button @click="delUser">批量删除</el-button>
        </el-header>
        <el-container class="table">
          <div
            element-loading-text="拼命加载中"
            style="height: auto;overflow:auto;width:100%"
            v-loading="listLoading1"
            class="table"
          >
            <el-table
              :data="configList1"
              @selection-change="handleSelectionChange"
              style="overflow:auto;"
              v-show="listVisible"
            >
              <el-table-column fixed type="selection" width="80"></el-table-column>
              <el-table-column fixed label="姓名" prop="realName">
                <template slot-scope="scope">
                  <el-tooltip
                    :content="scope.row.realName"
                    class="item"
                    effect="dark"
                    placement="top-start"
                    v-if="scope.row.realName && scope.row.realName.length > 5"
                  >
                    <span>{{scope.row.realName.slice(0,5)+"..."}}</span>
                  </el-tooltip>
                  <span v-else>{{scope.row.realName}}</span>
                </template>
              </el-table-column>
              <el-table-column label="邮箱" min-width="130" prop="userEmail">
                <template slot-scope="scope">
                  <el-tooltip
                    :content="scope.row.userEmail"
                    class="item"
                    effect="dark"
                    placement="top-start"
                    v-if="scope.row.userEmail && scope.row.userEmail.length > 16"
                  >
                    <span>{{scope.row.userEmail.slice(0,16)+"..."}}</span>
                  </el-tooltip>
                  <span v-else>{{scope.row.userEmail}}</span>
                </template>
              </el-table-column>
              <!-- <el-table-column label="管理员">
                <template slot-scope="scope">
                  <span v-if="scope.row.isAdministrators == 1">是</span>
                  <span v-if="scope.row.isAdministrators == 0">否</span>
                </template>
              </el-table-column>-->
              <el-table-column label="部门" prop="departmentName"></el-table-column>
              <el-table-column label="职位" prop="positionName"></el-table-column>
              <el-table-column label="ip" min-width="110" prop="ip"></el-table-column>
              <!-- <el-table-column label="状态" prop="status"></el-table-column> -->
              <el-table-column label="公司" prop="companyName"></el-table-column>
              <el-table-column label="操作" min-width="200">
                <template slot-scope="scope">
                  <el-button
                    @click="handleForbid(scope.$index, scope.row)"
                    class="butt1"
                    plain
                    v-if="scope.row.userStatus !== 1"
                  >禁用</el-button>
                  <el-button
                    @click="handleForbid(scope.$index, scope.row)"
                    class="butt2"
                    plain
                    v-if="scope.row.userStatus === 1"
                  >启用</el-button>
                  <el-button @click="handleEdit(scope.$index, scope.row)"
                             class="butt3"
                             plain>编辑</el-button>
                  <el-button @click="handleDelete(scope.$index, scope.row)"
                             class="butt4"
                             plain>删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="block">
              <!-- <el-row class="smallBtn">
                <el-button @click="addUser" plain size="small">添加人员</el-button>
                <el-button @click="delUser" plain size="small">批量删除</el-button>
              </el-row>-->
              <el-pagination
                :current-page="currentPage"
                :page-size="pagedata.size"
                :page-sizes="pagelist"
                :total="pagedata.total"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                class="page"
                layout="total, sizes, prev, pager, next, jumper"
              ></el-pagination>
            </div>
          </div>
        </el-container>
        <el-dialog :visible.sync="showAdd" @closed="closeDialog" id="box" title="添加人员">
      <div class="addInput">
        <el-form class="search s1">
          <span class="label">所属节点：</span>
          <el-select
            @change="ipfsSelect"
            placeholder="请选择节点"
            style="width: 230px;"
            v-model="value2"
          >
            <el-option
              :disabled="item.disabled"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              v-for="item in ipfsData"
            ></el-option>
          </el-select>
        </el-form>
        <el-form class="search s1">
          <span class="label" @blur='checkName'>真实姓名：</span>
          <el-input placeholder="请输入姓名" style="width: 230px;" v-model="name"></el-input>
        </el-form>
        <el-form class="search s1">
          <span class="label">登录邮箱：</span>
          <el-input @blur="checkEmail" placeholder="请输入邮箱" style="width: 230px;" v-model="email"></el-input>
        </el-form>
        <el-form class="search s1">
          <span class="label">设置密码：</span>
          <el-input placeholder="请输入密码(长度6~20位)" style="width: 230px;" type="password" v-model="pwd" @blur="checkPwd"></el-input>
          <!--<input type="password" placeholder="请输入密码" style="text-indent:15px; color: #606266; width: 230px; border:1px solid #dcdfe6;box-sizing: border-box;border-radius: 5px;">-->
        </el-form>
        <el-form class="search s1">
          <span class="label">重复密码：</span>
          <el-input
            @blur="checkPassword"
            placeholder="请输入重复密码"
            show-password
            style="width: 230px;"
            type="password"
            v-model="pwd2"
          ></el-input>
        </el-form>
        <el-form class="search s1 author">
          <span class="label">管理权限：</span>
          <!--<el-input v-model="author1" placeholder="请输入是或者否"  style="width: 230px;" @blur="checkAuthor"></el-input>-->
          <el-radio-group style="width: 230px;" v-model="author1">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form>
        <el-row class="btn">
          <el-button @click="certainAdd" plain size="small" type="primary">确定</el-button>
          <el-button @click="reAdd" plain size="small" type="success">继续添加</el-button>
        </el-row>
      </div>
    </el-dialog>
    <!--edit info-->
    <el-dialog :visible.sync="showEdit" @closed="closeDialog" id="edit" title="编辑人员">
      <div class="addInput">
        <el-form class="search">
          <div>
            <span class="label">所属公司：</span>
            <el-select
              @change="companySelect"
              placeholder="请选择公司"
              style="width: 230px;"
              disabled
              v-model="ruleForm.compValue"
            >
              <el-option
                :disabled="item.disabled"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                v-for="item in companyData"
              >
                <el-tooltip
                  :content="item.label"
                  class="item"
                  effect="dark"
                  placement="top"
                  v-if="item.label.length>10"
                >
                  <span
                    style="float: left;width: 160px;overflow: hidden;text-overflow: ellipsis"
                  >{{ item.label }}</span>
                </el-tooltip>
                <span style="float: left;" v-else>{{ item.label }}</span>
              </el-option>
            </el-select>
          </div>
        </el-form>
        <el-form class="search">
          <span class="label">所属部门：</span>
          <el-select
            @change="departmentSelect"
            placeholder="请选择部门"
            style="width: 230px;"
            v-model="ruleForm.departValue"
          >
            <el-option
              :disabled="item.disabled"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              v-for="item in departmentData"
            >
              <el-tooltip
                :content="item.label"
                class="item"
                effect="dark"
                placement="top"
                v-if="item.label.length>10"
              >
                <span
                  style="float: left;width: 160px;overflow: hidden;text-overflow: ellipsis"
                >{{ item.label }}</span>
              </el-tooltip>
              <span style="float: left;" v-else>{{ item.label }}</span>
            </el-option>
          </el-select>
        </el-form>
        <el-form class="search">
          <span class="label">职 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位：</span>
          <el-select
            @change="positionSelect"
            placeholder="请选择职位"
            style="width: 230px;"
            v-model="ruleForm.jobValue"
          >
            <el-option
              :disabled="item.disabled"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              v-for="item in positionData"
            >
              <el-tooltip
                :content="item.label"
                class="item"
                effect="dark"
                placement="top"
                v-if="item.label.length>10"
              >
                <span
                  style="float: left;width: 160px;overflow: hidden;text-overflow: ellipsis"
                >{{ item.label }}</span>
              </el-tooltip>
              <span style="float: left;" v-else>{{ item.label }}</span>
            </el-option>
          </el-select>
        </el-form>
        <el-form class="search s1">
          <span class="label">所属节点：</span>
          <el-select
            @change="ipfsSelect"
            placeholder="请选择节点"
            style="width: 230px;"
            v-model="value2"
          >
            <el-option
              :disabled="item.disabled"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              v-for="item in ipfsData"
            ></el-option>
          </el-select>
        </el-form>
        <el-form class="search s1">
          <span class="label">真实姓名：</span>
          <el-input placeholder="请输入姓名" style="width: 230px;" v-model="name" @blur="checkName"></el-input>
        </el-form>
        <el-form class="search s1">
          <span class="label">登录邮箱：</span>
          <el-input @blur="checkEmail" placeholder="请输入邮箱" style="width: 230px;" v-model="email"></el-input>
        </el-form>
        <el-form class="search s1">
          <span class="label">重置密码：</span>
          <el-input
            placeholder="修改请输入新密码，不修改为空"
            style="width: 230px;"
            type="password"
            v-model="pwd"
          ></el-input>
          <!--<input type="password" placeholder="请输入新密码" style="text-indent:15px; color: #606266; width: 230px; border:1px solid #dcdfe6;box-sizing: border-box;border-radius: 5px;">-->
        </el-form>
        <el-form class="search s1">
          <span class="label">重复密码：</span>
          <el-input
            @blur="checkPassword"
            placeholder="请输入重复密码"
            show-password
            style="width: 230px;"
            type="password"
            v-model="pwd2"
          ></el-input>
        </el-form>
        <el-form class="search s1 author">
          <span class="label">管理权限：</span>
          <el-radio-group style="width: 230px;" v-model="author1">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form>
        <el-row class="btn">
          <el-button @click="certainEdit" plain size="small" type="primary">确定</el-button>
          <el-button @click="showEdit=false" plain size="small" type="success">取消</el-button>
        </el-row>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="apartmentShow" title="添加部门" @close="reset">
      <el-form :rules="FormRules" label-width="80px" ref="addForm" status-icon :model="ruleForm" >
        <el-form-item label="部门名称" prop="departValue">
          <el-input clearable  placeholder="请输入部门名称" v-model="ruleForm.departValue"></el-input>
          <input style="display: none;" type="text">
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="cancleAddApartment">取 消</el-button>
        <el-button @click="addApartmentData" type="primary">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="positionShow" title="添加职位" @closed="resetForm">
      <el-form :rules="FormRules" label-width="80px" ref="addFormjob" status-icon :model="ruleForm" >
        <el-form-item label="职位名称" prop="jobValue">
          <el-input clearable  placeholder="请输入职位名称" v-model="ruleForm.jobValue"></el-input>
          <input style="display: none;" type="text">
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="cancleAddPosition">取 消</el-button>
        <el-button @click="addPositionData" type="primary">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="ecompanyShow" title="编辑公司" @closed="reset">
      <el-form :rules="FormRules" label-width="80px" ref="addForm" status-icon :model="ruleForm">
        <el-form-item label="公司名称" prop="compValue">
          <el-input clearable  placeholder="请输入公司名称" v-model="ruleForm.compValue"></el-input>
          <input style="display: none;" type="text">
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="cancleEditCompany">取 消</el-button>
        <el-button @click="editCompanyData" type="primary">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="eapartmentShow" title="编辑部门" @closed="reset">
      <el-form :rules="FormRules" label-width="80px" ref="addForm" status-icon :model="ruleForm">
        <el-form-item label="部门名称" prop="departValue">
          <el-input clearable  placeholder="请输入部门名称" v-model="ruleForm.departValue"></el-input>
          <input style="display: none;" type="text">
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="cancleEditApartment">取 消</el-button>
        <el-button @click="editApartmentData" type="primary">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="epositionShow" title="编辑职位" @closed="reset">
      <el-form :rules="FormRules" label-width="80px" ref="addForm" status-icon :model="ruleForm">
        <el-form-item label="职位名称" prop="jobValue">
          <el-input clearable  placeholder="请输入职位名称" v-model="ruleForm.jobValue"></el-input>
          <input style="display: none;" type="text">
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="cancleEditPosition">取 消</el-button>
        <el-button @click="editPositionData" type="primary">确 定</el-button>
      </div>
    </el-dialog>
    <ul id="testRight" v-show="false">
      <li @click="editCom" v-show="rightShow.company">
        <i aria-hidden="true" class="fa fa-pencil-square-o"></i>编辑公司
      </li>
      <li @click="addDep" v-show="rightShow.company">
        <i aria-hidden="true" class="fa fa-plus"></i>添加部门
      </li>
      <li @click="addPos" v-show="rightShow.department">
        <i aria-hidden="true" class="fa fa-plus"></i>添加职位
      </li>
      <li @click="editDep" v-show="rightShow.department">
        <i aria-hidden="true" class="fa fa-pencil-square-o"></i>编辑部门
      </li>
      <li @click="deleteDepartment" v-show="rightShow.department">
        <i aria-hidden="true" class="fa fa-trash"></i>删除部门
      </li>
      <li @click="editPos" v-show="rightShow.position">
        <i aria-hidden="true" class="fa fa-pencil-square-o"></i>编辑职位
      </li>
      <li @click="deletePosition" v-show="rightShow.position">
        <i aria-hidden="true" class="fa fa-trash"></i>删除职位
      </li>
    </ul>
      </el-container>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapState, mapMutations } from "vuex";
var companyId = localStorage.getItem("companyId");
export default {
  name: "ConfigurationPage",
  inject: ["reloadHome"],
  data() {
    let checkName1=(rule, value, callback) => {
      console.log(value);
      console.log(this.ruleForm.jobValue);
      if (!value) {
        return callback(new Error("命名不能为空"));
      } else {
        let reg = new RegExp('^[^\\\\\\/:.,、，*?\\"<>| ]+$');
        if (!reg.test(value)) {
          callback(new Error('命名格式不正确 (命名不能为全空或包含空格及 【/.,、，:*?\\"<>|】)'));
        } else if (value.length > 20) {
          callback(new Error("命名长度超出上限"));
        } else {
          callback();
        }
      }
      };
    return {
      isNetwork: true,
      isPerson: false,
      currentSearch: "",
      hasNet: false,
      hastable: true,
      activeName: "0",
      listLoading: true,
      addSubmitLoading: false,
      editSubmitLoading: false,
      // listVisible: true,
      addConfigVisible: false,
      editConfigVisible: false,
      configList: [],
      sels: [], // 列表选中列
      addForm: {
        ip: "",
        apiPort: "",
        gatewayPort: "",
        ipAddr: "",
        ipfsId: "",
        remarks: ""
      },
      editForm: {
        type1:"",
        type: "",
        id: "",
        ip: "",
        apiPort: "",
        gatewayPort: "",
        ipAddr: "",
        ipfsId: "",
        remarks: ""
      },
      addFormRules: {
        ip: [
          { required: true, message: "请输入节点IP", trigger: "blur" },
          {
            pattern: /^(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])$/,
            message: "输入IP格式不正确"
          }
        ],
        apiPort: [
          { required: true, message: "请输入上传端口", trigger: "blur" },
          {
            pattern: /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{4}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/,
            message: "输入上传端口格式不正确"
          }
        ],
        gatewayPort: [
          { required: true, message: "请输入路由端口", trigger: "blur" },
          {
            pattern: /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{4}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/,
            message: "输入路由端口格式不正确"
          }
        ],
        },
        expandKey:[localStorage.getItem("companyId")],
      FormRules: {
        jobValue: [{ validator: checkName1, trigger: "blur" }],
        departValue:[{ validator: checkName1, trigger: "blur" }],
        compValue: [{ validator: checkName1, trigger: "blur" }]
      },
      ruleForm: {
          compValue: '',
          jobValue: '',
          departValue: '',
        },
      addcompany: false,
      defaultProps: {
        children: "children",
        label: "label"
      },
      company: [
        {
          level: 0,
          label: localStorage.getItem("companyName"),
          id: localStorage.getItem("companyId"),
          children: []
        }
      ],
      department: [],
      position: [],
      autdata: [
        {
          value: "是",
          label: "是"
        },
        {
          value: "否",
          label: "否"
        }
      ],
      input11: "",
      listVisible: true,
      configList1: [],
      listLoading1: true,
      currentPage: 1,
      pagedata: {},
      pagelist: [10, 20],
      rows: 10,
      showAdd: false,
      showEdit: false,
      companyData: [], //公司data
      // value3: "", //公司
      companyValue: "", //公司
      departmentData: [], //部门data
      // value: "", //部门
      positionData: [], //职位data
      // ruleForm.jobValue: "", //职位
      ipfsData: [], //节点
      value2: "", //节点
      name: "", //真实姓名
      email: "", //邮箱
      pwd: "", //密码
      pwd2: "", //重复密码
      user: "", //用户目录
      author1: 0, //用户输入是否管理员 0普通用户 1管理员
      apartmentShow: false,
      positionShow: false,
      companyShow: false,
      eapartmentShow: false,
      epositionShow: false,
      ecompanyShow: false,
      personId: 0, //人员id
      departmentId: 0, //部门id
      positionId: 0, //职位id
      ipfsId: 0, //节点id
      companyId: 0, //公司id
      deletedata: [], //批量删除数据
      deleteVisible: false,
      isEmailRight: true,
      currentPos: "",
      tempId: 0,
      rightShow: {
        company: false,
        department: false,
        position: false
      },
      specific: {
        companyId: "",
        departmentId: "",
        positionId: ""
      },
      issearch:false,
      positionValue: "",
      departmentValue: "",
      tempDepartmentData: {},
      tempParent: {
        temppid: 0,
        plabel: "",
        pplabel: ""
      },
      gobacked: true,
      gobackLevel: 0,
      gobackId: [],
      isTree: true,
      rightX: 310,
      witchNetwork:1,
      dataStore:[],
      nodeInfo:null,
    };
  },
  //     components: {PersonConfig, NetworkConfig},
  computed: {
    ...mapState(["searchInput","canSearch"])
  },
  watch: {
    searchInput: {
      handler: function(newVal, oldVal) {
        if(this.isNetwork==true){
          console.log("this is group searchInput new data ", newVal);
        if(newVal.length == 0){
          this.currentPage = 1;
          this.rows = 10;
        }
        if (newVal != oldVal) {
          console.log(this);
          this.getNetConfig(newVal);
        }
        }else{
          console.log("this is person searchInput new data ", newVal);
        if (newVal != oldVal) {
          if(newVal.lenght == 0){
            this.issearch == false
          }else{
            this.issearch == true
          }
          console.log(this);
          this.getUsers(newVal);
        }
        }

      }
    },
    // 如果 `addConfigVisible` 发生改变，这个函数就会运行
    addConfigVisible: function(newQuestion, oldQuestion) {
      if (this.$refs["addForm"] !== undefined) {
        this.$refs["addForm"].clearValidate();
      }
    }
  },
  created() {
    this.$store.state.canSearch = false;
    this.$store.state.placeHolder = "搜索节点名称";
    this.getNetConfig();
    this.companyId=JSON.parse(
      localStorage.getItem("userInfo")
    ).companyId;
    this.specific.companyId = JSON.parse(
      localStorage.getItem("userInfo")
    ).companyId;
    this.companyValue = JSON.parse(
      localStorage.getItem("userInfo")
    ).companyName;
    let companyId = this.specific.companyId;
    this.companyId = companyId;
    this.getSpecificUser();
    this.getDepartment(companyId);
    this.getConfig();
  },
  methods: {
    reset(){
      this.$refs.addForm.resetFields()
    },
     resetForm() {
       this.$refs.addFormjob.resetFields();
      },
    handleNetWorkClick() {
      this.isNetwork = true;
      this.isPerson = false;
      this.$store.state.placeHolder = "搜索节点IP";
    },
    handlePersonClick() {
      this.isNetwork = false;
      this.isPerson = true;
      this.$store.state.placeHolder = "搜索人员信息";
      this.getConfig();
    },
    selsChange() {},
    handleCellClick() {},
    refresh() {
      this.reloadHome();
    },
    addHandle() {},
    rowClass(row, index) {
    },
    getNetConfig(a) {
      let ip;
      if (a == undefined) {
        ip = "";
      } else {
        ip = a;
      }
      console.log(ip);
      this.listLoading = true;
      this.hasNet = false;
      this.hastable = true;
      this.$http
        .post("/management/getConfig", {
          ip: ip
        })
        .then(res => {
          console.log(11111, res);
          if (res.status === 200) {
            if (res.data == false) {
              if (ip == "") {
                this.hasNet = true;
                this.hastable = false;
              } else {
                this.hastable = false;
                this.hastable = false;
              }
            }
            this.configList = res.data;
            this.dataStore=res.data;
            this.listLoading = false;
            this.witchNetWorkClick(this.witchNetwork);
          }
        });
    },
    selsChange(sels) {
      this.sels = sels;
    },
    deleteHandle(row) {
      console.log(row.id);
      this.$confirm("确认删除该节点吗？","提示",{}).then(()=>{
        this.$http.post("/config/del", { id: [row.id] }).then(res => {
          console.log("del", res);
          if (res.status == 200) {
            this.getNetConfig();
            this.$message({
              type: "success",
              message: "删除成功"
            });
          }else{
            this.$message.error(res.msg);
          }
        });
      })

    },
    editHandle(row) {
      console.log(row);
      let { id, ip, apiPort, gatewayPort, ipfsId, type,remarks } = row;
      if (type == 0) {
        type = "内网";
      } else {
        type = "公网";
      }
      this.editForm = {
        type1:type,
        type: type,
        id: id,
        ip: ip,
        apiPort: apiPort,
        gatewayPort: gatewayPort,
        remarks:remarks
      };
      this.editConfigVisible = true;
      console.log(this.editForm);
    },
    editConfigSubmit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          console.log("editHandle", this.editForm);
          // this.editSubmitLoading = true;
          if (this.editForm.type1 == "0" || this.editForm.type1 == "内网") {
            this.editForm.type = 0;
          } else {
            this.editForm.type = 1;
          }
          this.$http.post("/config/update", this.editForm).then(res => {
            console.log("editHandle", res);
            console.log(res);
            if (res.status == 200) {
              this.getNetConfig();
              this.editConfigVisible = false;
              // this.aaaaaaaaaa
              // console.log(this.witchNetwork);
              this.$message({
                type: "success",
                message: res.msg
              });
            }
          });
        }
      });
    },
    addHandle() {
      this.addConfigVisible = true;
      let typetemp;
      if (this.activeName == "0") {
        typetemp = 0;
      } else {
        typetemp = 1;
      }
      this.addForm = {
        type: typetemp,
        ip: "",
        apiPort: "",
        gatewayPort: "",
        ipfsId: "",
        remarks: ""
      };
    },
    addConfigSubmit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          console.log("addConfigSubmit", this.addForm);
          this.addSubmitLoading = true;
          this.$http.post("/management/addConfig", this.addForm).then(res => {
            console.log(res);
            if (res.status == 200) {
              this.getNetConfig();
              this.addSubmitLoading = false;
              this.addConfigVisible = false;
              this.$message({
                type: "success",
                message: res.msg
              });
            }
          });
        }else{
          this.addSubmitLoading = false;
          this.$message.error("请先完善配置信息");
          return;
        }
      });
    },
    cancel(formName) {
      this.$refs[formName].clearValidate();
    },
    // *********************************
    witchNetWorkClick(i){
      console.log(i);
      this.witchNetwork=i;
      this.configList=[];
      if(this.witchNetwork==2){
        this.activeName='0'
        this.dataStore.forEach(val=>{
          if(val.type=='0'){
            this.configList.push(val);
          }
        },this.configList)
      }else if(this.witchNetwork==3){
        this.activeName='1'
        this.dataStore.forEach(val=>{
          if(val.type=='1'){
           this.configList.push(val);
          }
        },this.configList)
      }else{
        this.activeName='0';
        this.configList=this.dataStore;
      }
      console.log(this.configList);
    },
    gobackByAddress(n) {
      this.gobackLevel = n;
    },
    getConfig() {
      this.ipfsData = [];
      this.$http
        .post("/management/getConfig", {
          ip: ""
        })
        .then(res => {
          if (res.status == 200) {
            res = res.data;
            res.forEach((val, key) => {
              this.ipfsData.push({
                value: val.id,
                label: val.ip
              });
            });
          }
        });
    },
    getSpecificUser() {
      console.log("getSpecificUser", this.specific);
      if(this.specific.departmentId == ''){
        this.specific.positionId = '';
      }
      this.listLoading1 = true;
      this.configList1 = [];
      this.$http
        .post("/management/getSpecificUser", {
          rows: this.rows,
          page: this.currentPage,
          searchInfo: "",
          companyId: this.specific.companyId,
          departmentId: this.specific.departmentId,
          positionId: this.specific.positionId
        })
        .then(res => {
          if (res.status == 200) {
            console.log(res);
            res = res.data;
            if (res.records.length > 0) {
              this.configList1 = res.records;
              this.pagedata = {
                size: res.size,
                total: res.total,
                current: res.current,
                pages: res.pages
              };
              this.configList1.forEach((val, key) => {
                if (val.userStatus == 0) {
                  val.status = "正常";
                } else if (val.userStatus == 1) {
                  val.status = "已禁用";
                } else {
                  val.status = "已删除";
                }
              });
            } else {
              if (this.currentPage > 1) {
                this.currentPage--;
                this.getSpecificUser();
              }
            }
            this.listLoading1 = false;
          }
        });
    },
    addDep() {
      this.ruleForm.departValue = "";
      this.apartmentShow = true;
    },
    addPos() {
      this.ruleForm.jobValue = "";
      this.positionShow = true;
    },
    editCom() {
      this.ecompanyShow = true;
    },
    editDep() {
      this.eapartmentShow = true;
    },
    editPos() {
      this.epositionShow = true;
    },
    editCompanyData() {
      console.log(this.ruleForm.compValue);
      this.$refs.addForm.validate(valid => {
        if(valid){
          this.$http
            .post("/company/update", {
              id: this.companyId,
              name: this.ruleForm.compValue
            })
            .then(res => {
              if (res.status == 200) {
                this.getDepartment(this.companyId);
                this.ecompanyShow = false;
                this.$message({
                  type: "success",
                  message: "修改成功"
                });
                localStorage.setItem("companyName",this.ruleForm.compValue);
                this.company[0].label=this.ruleForm.compValue;
                this.getSpecificUser();
                this.isTree=false;
                this.$nextTick(function(){
                  this.isTree=true;
                })
              } else {
                this.$message.error(res.msg);
              }
            });
        }})
    },
    editApartmentData() {
      this.$refs.addForm.validate(valid => {
        if(valid){
          this.$http
            .post("/department/update", {
              id: this.departmentId,
              companyId: this.companyId,
              departmentName: this.ruleForm.departValue
            })
            .then(res => {
              if (res.status == 200) {
                this.getDepartment(this.companyId);
                this.eapartmentShow = false;
                this.getSpecificUser();
                this.$message({
                  type: "success",
                  message: "修改成功"
                });
              } else {
                this.$message.error(res.msg);
              }
            });
        }
      })
    },
    editPositionData() {
      this.$refs.addForm.validate(valid => {
        if(valid){
          this.$http
            .post("/position/update", {
              departmentId: this.departmentId,
              id: this.positionId,
              positionName: this.ruleForm.jobValue
            })
            .then(res => {
              if (res.status == 200) {
                this.getDepartment(this.companyId);
                this.epositionShow = false;
                this.getSpecificUser();
                this.$message({
                  type: "success",
                  message: "修改成功"
                });
              } else {
                this.$message.error(res.msg);
              }
            });
        }})

    },
    cancleEditCompany() {
      this.ruleForm.compValue = "";
      this.ecompanyShow = false;
    },
    cancleEditApartment() {
      this.ruleForm.departValue = "";
      this.eapartmentShow = false;
    },
    cancleEditPosition() {
      this.ruleForm.jobValue = "";
      this.epositionShow = false;
    },
    /**
     * 删除职位
     */
    deletePosition() {
      this.$confirm("确认删除该职位吗？", "提示", {}).then(() => {
        this.$http.delete("/position/" + this.tempId).then(res => {
          if (res.status == 200) {
            this.$message({
              message: "职位已删除",
              type: "success",
              duration: "1000"
            });
            this.expandKey[2] = this.specific.departmentId;
            this.getDepartment(this.companyId, "a");
            this.showEdit = false;
            this.showAdd = false;
            this.specific.positionId = "";
            this.positionValue = "";
            this.getSpecificUser();
          } else {
            this.$message.error("操作失败");
          }
        });
      });
    },
    /**
     * 获取添加职位数据
     */
    addPositionData() {
      console.log("增加的部门id： " + this.departmentId);
      // console.log(this.$refs.addFormp)
      if (this.ruleForm.jobValue != "") {
        this.$refs.addFormjob.validate(valid => {
          console.log(11111, valid)
          if(valid){
            this.$http
          .post("/position/insert", {
            positionName: this.ruleForm.jobValue,
            departmentId: this.departmentId
          })
          .then(res => {
            if (res.status == 200) {
              this.expandKey[2] = this.departmentId;
              this.getDepartment(this.companyId, "a");
              console.log(this.departmentId);
              this.$message({
                message: "职位添加成功",
                type: "success",
                duration: "1000"
              });
              this.positionId = res.data.positionId;
              this.positionShow = false;
            } else if (res.status == 500) {
              this.$message.error({
                message: res.msg,
                duration: 1000
              });
            }
          });
          }
        })
      } else {
        this.$message({
          message: "职位不能为空",
          duration: 1000
        });
      }
    },
    /**
     * 取消添加职位
     */
    cancleAddPosition() {
      this.positionShow = false;
      this.ruleForm.jobValue = "";
    },
    /**
     * 添加职位
     */
    addPosition() {
      if (this.ruleForm.compValue == "") {
        this.$message("请先选择公司");
        return;
      }
      if (this.ruleForm.departValue == "") {
        this.$message("请先选择部门");
        return;
      }
      if (this.companyShow || this.apartmentShow) {
        this.$message("请先完成添加操作");
        return;
      }
      this.positionShow = true;
      this.ruleForm.jobValue = "";
    },
    /**
     * 删除部门
     */
    deleteDepartment() {
      this.$confirm(
        "确认删除该部门吗？该部门下职位也将被删除哦(ಥ﹏ಥ)",
        "提示",
        {}
      ).then(() => {
        this.$http.delete("/department/" + this.tempId).then(res => {
          if (res.status == 200) {
            this.$message({
              message: "部门已删除",
              type: "success",
              duration: "1000"
            });
            this.expandKey[1] = this.companyId;
            this.getDepartment(this.companyId, "a");
            this.showEdit = false;
            this.showAdd = false;
            this.specific.positionId = "";
            this.positionValue = "";
            this.specific.departmentId = "";
            this.departmentValue = "";
            this.getSpecificUser();
          } else {
            this.$message.error("操作失败");
          }
        });
      });
    },
    /**
     * 获取添加部门数据
     */
    addApartmentData() {
      if (this.ruleForm.departValue != "") {
        this.$refs.addForm.validate(valid => {
          if(valid){
            this.$http
              .post("/department/insert", {
                departmentName: this.ruleForm.departValue,
                companyId: this.companyId
              })
              .then(res => {
                if (res.status == 200) {
                  this.ruleForm.jobValue = "";
                  this.expandKey[1] = this.companyId;
                  this.getDepartment(this.companyId);
                  this.departmentId = res.data.departmentId;
                  this.$message({
                    message: "部门添加成功",
                    type: "success",
                    duration: "1000"
                  });
                  this.apartmentShow = false;
                } else if (res.status == 500) {
                  this.$message.error({
                    message: res.msg,
                    duration: 1000
                  });
                }
              });
          }
        })
      } else {
        this.$message({
          message: "部门不能为空",
          duration: 1000
        });
      }
    },
    /**
     * 取消添加部门
     */
    cancleAddApartment() {
      this.apartmentShow = false;
      this.ruleForm.departValue = "";
    },
    /**
     * 添加部门
     */
    addApartment() {
      if (this.ruleForm.compValue == "") {
        this.$message("请先选择公司");
        return;
      }
      if (this.companyShow || this.positionShow) {
        this.$message("请先完成添加操作");
        return;
      }
      this.apartmentShow = true;
      this.ruleForm.departValue = "";
    },
    /**
     * 右键菜单
     * @param event
     */
    nodeRightClick(event, data) {
      if (data.level == 0) {
        this.ruleForm.compValue = data.label;
        this.currentPos = "公司";
        this.rightShow.company = true;
        this.rightShow.department = false;
        this.rightShow.position = false;
        this.companyId = data.id;
      } else if (data.level == 1) {
        this.ruleForm.departValue = data.label;
        this.tempDepartmentData = data;
        this.currentPos = "部门";
        this.rightShow.company = false;
        this.rightShow.department = true;
        this.rightShow.position = false;
        this.departmentId = data.id;
        this.tempParent.plabel = data.label;
      } else {
        this.ruleForm.jobValue = data.label;
        this.currentPos = "职位";
        this.rightShow.company = false;
        this.rightShow.department = false;
        this.rightShow.position = true;
        this.positionId = data.id;
      }
      this.tempId = data.id;
      var forRight = document.getElementById("testRight");
      if (forRight != "") {
        forRight.style.display = "none";
        var title = forRight.getElementsByTagName("li");

        for (var i = 0; i < title.length; i++) {
          title[i].onmouseover = function() {
            this.classname = "active";
          };
          title[i].onmouseout = function() {
            this.classname = "";
          };
        }
        forRight.style.display = "block";
        forRight.style.left = event.pageX - this.rightX + 200+"px";
        forRight.style.top = event.pageY - 90 + "px";
        document.onclick = function() {
          forRight.style.display = "none";
        };
      }
    },
    /**
     * 选择公司
     * @param event
     * @param item
     */
    companySelect(item) {
      if (this.companyId != item) {
        this.companyId = item;
        this.ruleForm.departValue = "";
        this.ruleForm.jobValue = "";
        this.getCompany2();
        this.getDepartment2(this.companyId);
      }
    },
    /**
     * 获取部门信息
     */
    getDepartment2(id) {
      this.departmentData = [];
      this.$http
        .get("/department/list", {
          params: {
            companyId: id
          }
        })
        .then(res => {
          if (res.status == 200) {
            res = res.data;
            res.forEach((val, key) => {
              this.departmentData.push({
                value: val.id,
                label: val.departmentName
              });
            });
          }
        });
    },
    /**
     * 获取公司信息
     */
    getCompany2() {
      this.companyData = [];
      this.$http.get("/company/list", {}).then(res => {
        if (res.status == 200) {
          res = res.data;
          res.forEach((val, key) => {
            this.companyData.push({
              value: val.id,
              label: val.name
            });
          });
        }
      });
    },
    /**
     * 根据部门ID获取职位数据
     */
    getupDep2() {
      this.positionData = [];
      // if(this.departmentId)
      console.log(this.departmentId);
      if(this.departmentId == null){
        return;
      }
      this.$http
        .get("/position/getupDep", {
          params: {
            departmentId: this.departmentId
          }
        })
        .then(res => {
          if (res.status == 200) {
            res = res.data;
            res.forEach((val, key) => {
              this.positionData.push({
                value: val.id,
                label: val.positionName
              });
            });
          }
        });
    },
    /**
     * 选择部门
     * @param event
     * @param item
     */
    departmentSelect(item) {
      if (this.departmentId != item) {
        this.positionId = '';
        this.departmentId = item;
        this.getupDep2();
        this.ruleForm.jobValue = "";
      }
    },
    /**
     * 选择职位
     * @param event
     * @param item
     */
    positionSelect(item) {
      console.log(item);
      this.positionId = item;
    },
    /**
     * 检查邮箱
     */
    checkEmail() {
      // var re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
      //let re=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
      let re=/^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/;
      if (re.test(this.email)) {
        this.isEmailRight = true;
      } else {
        this.$message.error("邮箱格式不正确");
        this.isEmailRight = false;
      }
    },
    checkName(){
      let reg = new RegExp('^[^\\\\\\/:.,、。，*?\\"<>| ]+$');
      if (!reg.test(this.name)) {
        this.$message.error("命名格式不正确 (命名不能为全空或包含空格及 【/.,、，:*?\\\"<>|】)");
        return false
      } else if (this.name.length > 20) {
        this.$message.error("命名长度超出上限");
        return false
      }else{
        return true
      }
        // if (this.name.length > 20) {
        //   // if(this.name())
        //   this.$message.error("命名长度超出上限");
        //   return false
        // }else{
        //   return true
        // }
    },
    checkPwd(){
      if (this.pwd.length < 6 || this.pwd.length >20) {
        this.$message.error("密码长度6-20位");
        return;
      }
    },
    /**
     * 检查重复密码
     */
    checkPassword() {
      if (this.pwd2 != this.pwd) {
        this.$message.error("两次输入密码不一致");
      }
    },
    /**
     * 选择节点
     * @param event
     * @param item
     */
    ipfsSelect(item) {
      this.ipfsId = item;
    },
    /**
     * 确认编辑
     */
    certainEdit() {
      if (
        this.value2 != "" &&
        this.name != "" &&
        this.email != ""
      ){
        if (this.companyShow) {
        this.$message("请先添加完公司信息");
        return;
      }
      if (this.apartmentShow) {
        this.$message("请先添加完部门信息");
        return;
      }
      console.log(this.positionId);
      if (this.positionId == '') {
        this.$message("请先添加完职位信息");
        return;
      }
      if (this.personId != "") {
        if(!this.checkName()){
          // this.$message.error("真实姓名超长");
          return;
        }
        if (!this.isEmailRight) {
          this.$message.error("请输入正确的邮箱格式");
          return;
        }
        if (this.pwd !== this.pwd2) {
          this.$message.error("两次输入密码不一致");
          return;
        }
      }
        this.$http
          .post("/user/update", {
            id: this.personId,
            userEmail: this.email,
            realName: this.name,
            password: this.pwd,
            configId: this.ipfsId,
            positionId: this.positionId,
            isAdministrators: this.author1,
            companyId: this.companyId
          })
          .then(res => {
            if (res.status == 200) {
              this.getSpecificUser();
              this.$message({
                message: res.msg,
                type: "success",
                duration: "1000"
              });
              this.showEdit = false;
            } else if (res.status == 500) {
              this.$message.error({
                message: res.msg,
                duration: 1000
              });
            }
          });
      }else{
        this.$message.error({
          message: "请完善输入框信息",
          duration: 1000
        });
      }
    },
    initData() {
      this.ruleForm.departValue = "";
      this.ruleForm.jobValue = "";
      this.value2 = "";
      this.ruleForm.compValue = "";
      this.email = "";
      this.name = "";
      this.pwd = "";
      this.pwd2 = "";
      this.user = "";
      this.ipfsId = 0;
      this.positionId = 0;
      this.author1 = 0;
      this.departmentId = 0;
      this.positionData = [];
      this.apartmentShow = false;
      this.companyShow = false;
      this.positionShow = false;
    },
    reAdd(){
      if (
        this.pwd != "" &&
        this.pwd2 != "" &&
        this.value2 != "" &&
        this.name != "" &&
        this.email != ""
      ) {
            if (!this.isEmailRight) {
          this.$message.error("请输入正确的邮箱格式");
          return;
        }
        if (this.pwd !== this.pwd2) {
          this.$message.error("两次输入密码不一致");
          return;
        }
        if(!this.checkName()){
          // this.$message.error("真实姓名超长");
          return;
        }
        this.$http
          .post("/management/addUser", {
            userEmail: this.email,
            realName: this.name,
            password: this.pwd,
            configId: this.ipfsId,
            positionId: this.specific.positionId,
            isAdministrators: this.author1,
            companyId: this.companyId
          })
          .then(res => {
            if (res.status == 200) {
              this.getSpecificUser();
              this.$message({
                message: res.msg,
                type: "success",
                duration: "1000"
              });
            } else if (res.status == 500) {
              this.$message.error({
                message: res.msg,
                duration: 1000
              });
            }
          });
      } else {
        this.$message.error({
          message: "请完善输入框信息",
          duration: 1000
        });
      }
      this.pwd = "";
      this.pwd2 = "";
      this.value2 = "";
      this.name = "";
      this.email = "";
    },
    /**
     * 确认添加
     */
    certainAdd() {
      if (
        this.pwd != "" &&
        this.pwd2 != "" &&
        this.value2 != "" &&
        this.name != "" &&
        this.email != ""
      ) {
        if (!this.isEmailRight) {
          this.$message.error("请输入正确的邮箱格式");
          return;
        }
        if (this.pwd !== this.pwd2) {
          this.$message.error("两次输入密码不一致");
          return;
        }
        if(!this.checkName()){
          // this.$message.error("真实姓名超长");
          return;
        }
        this.$http
          .post("/management/addUser", {
            userEmail: this.email,
            realName: this.name,
            password: this.pwd,
            configId: this.ipfsId,
            positionId: this.specific.positionId,
            isAdministrators: this.author1,
            companyId: this.companyId
          })
          .then(res => {
            if (res.status == 200) {
              this.getSpecificUser();
              this.$message({
                message: res.msg,
                type: "success",
                duration: "1000"
              });
              this.showAdd = false;
            } else if (res.status == 500) {
              this.$message.error({
                message: res.msg,
                duration: 1000
              });
            }
          });
      } else {
        this.$message.error({
          message: "请完善输入框信息",
          duration: 1000
        });
      }
    },
    /**
     * 关闭添加or编辑对话框回调
     */
    closeDialog() {
      this.initData();
    },
    /**
     * 获取删除某一行的数据
     */
    handleDelete(index, row) {
      this.deleteFun();
      this.deletedata = [];
      this.deletedata.push(row.userId);
    },
    /**
     * 获取编辑某一行的数据
     */
    handleEdit(index, row) {
      this.showEdit = true;
      this.personId = row.userId;
      this.ruleForm.departValue = row.departmentName;
      this.ruleForm.jobValue = row.positionName;
      this.value2 = row.ip;
      this.ruleForm.compValue = row.companyName;
      this.name = row.realName;
      this.email = row.userEmail;
      this.pwd = "";
      this.author1 = row.isAdministrators;
      this.departmentId = row.userDepartmentId;
      this.positionId = row.userPositionId;
      this.ipfsId = row.userConfigId;
      this.companyId = row.userCompanyId;
      this.getCompany2();
      this.getDepartment2(this.companyId);
      this.getupDep2(this.departmentId);
    },
    /**
     * 获取禁用用户某一行
     */
    handleForbid(index, row) {
      let message = "";
      if (row.userStatus == 0) {
        message = "禁用";
      } else {
        message = "恢复";
      }
      this.$confirm("确定" + message + "该用户吗？", "提示", {}).then(() => {
        this.$http
          .post("/management/userStatus", {
            id: row.userId
          })
          .then(res => {
            if (res.status == 200) {
              this.$message({
                message: "操作成功",
                type: "success"
              });
              this.getSpecificUser();
            } else {
              this.$message.error("操作失败");
            }
          });
      });
    },
    /**
     * 删除人员
     */
    deleteFun() {
      this.$confirm("是否确认删除", "提示", {}).then(() => {
        this.$http
          .post("/user/del", {
            id: this.deletedata
          })
          .then(res => {
            if (res.status == 200) {
              this.getSpecificUser();
              this.$message({
                message: res.msg,
                type: "success",
                duration: "1000"
              });
            } else if (res.status == 500) {
              this.$message.error({
                message: res.msg,
                duration: 1000
              });
            }
          });
      });
    },
    /**
     * 批量删除人员
     */
    delUser() {
      if (this.deletedata != "") {
        this.deleteFun();
      } else {
        this.$message({
          message: "请先选择要删除的元素",
          duration: "1000"
        });
      }
    },
    /**
     * 添加人员信息
     */
    addUser() {
      if (this.positionValue == "") {
        this.$message("请先在左侧选择要添加人员的公司部门职位");
        return;
      }
      this.showAdd = true;
    },
    /**
     * 分页页码改变
     * @param val
     */
    handleCurrentChange(val) {
      this.currentPage = val;
      if(this.issearch == false){
        this.getSpecificUser();
      }else{
        this.getUsers(this.searchInput);
      }
    },
    /**
     * 分页每页显示条数改变
     * @param val
     */
    handleSizeChange(val) {
      this.rows = val;
      if(this.issearch == false){
        this.getSpecificUser();
      }else{
        this.getUsers(this.searchInput);
      }

    },
    /**
     * 获取人员配置信息
     */
    getUsers(a) {
      let info;
      if (a == undefined) {
        info = "";
      } else {
        info = a;
      }
      this.issearch = true;
      this.listLoading1 = true;
      this.$http
        .post("/management/getUser", {
          rows: this.rows,
          page: this.currentPage,
          searchInfo: info
        })
        .then(res => {
          if (res.status == 200) {
            console.log(res);
            res = res.data;
            if (res.records.length >= 0) {
              this.configList1 = res.records;
              this.pagedata = {
                size: res.size,
                total: res.total,
                current: res.current,
                pages: res.pages
              };
              this.configList1.forEach((val, key) => {
                if (val.userStatus == 0) {
                  val.status = "正常";
                } else if (val.userStatus == 1) {
                  val.status = "已禁用";
                } else {
                  val.status = "已删除";
                }
              });
            } else {
              if (this.currentPage > 1) {
                this.currentPage--;
                this.getUsers();
              }
            }
            this.listLoading1 = false;
          }
        });
    },
    /**
     * 选择框改变获取用户id
     */
    handleSelectionChange(val) {
      this.deletedata = [];
      val.forEach((v, k) => {
        this.deletedata.push(v.userId);
      });
    },
    nodeexpand(data,node) {
      if(this.nodeInfo==null){
        this.nodeInfo=node;
      }
      this.nodeInfo.isCurrent = false;
      this.nodeInfo = node;
      this.nodeInfo.isCurrent = true;
      console.log(data);
      this.expandKey = [];
      if (data.level == 0) {
        this.tempParent.temppid = data.id;
        this.tempParent.pplabel = data.label;
        this.specific.positionId = "";
        this.specific.departmentId = "";
        this.specific.companyId = data.id;
        //给公司赋值之前清空部门和职位的值
        this.departmentValue = "";
        this.positionValue = "";
        this.companyValue = data.label;
        this.companyId = data.id;
        data.children = [];
        console.log("before", data);
        this.department.forEach(val => {
          if (val.pid == data.id) {
            data.children.push({
              level: 1,
              id: val.id,
              pid: val.pid,
              label: val.label,
              plabel: data.label,
              children: [{}]
            });
          }
        });
        console.log("after", data);
      } else if (data.level == 1) {
        this.tempDepartmentData = data;
        this.departmentId = data.id;
        this.specific.companyId = data.pid;
        this.specific.departmentId = data.id;
        this.specific.positionId = "";
        data.children = [];
        this.position.forEach(val => {
          if (val.pid == data.id) {
            data.children.push({
              id: val.id,
              pid: val.pid,
              label: val.label,
              ppid: data.pid,
              plabel: data.label,
              pplabel: data.plabel
            });
          }
        });
        this.companyValue = data.plabel;
        this.positionValue = "";
        this.departmentValue = data.label;
      } else {
        if (this.tempParent.plabel != "") {
          data.ppid = this.tempParent.temppid;
          data.plabel = this.tempParent.plabel;
          data.pplabel = this.tempParent.pplabel;
        }
        this.positionId = data.id;
        this.specific.companyId = data.ppid;
        this.specific.departmentId = data.pid;
        this.specific.positionId = data.id;
        this.positionValue = data.label;
        this.departmentValue = data.plabel;
        this.companyValue = data.pplabel;
      }
    },
    handleNodeClick(data, node) {
      var forRight = document.getElementById("testRight");
      forRight.style.display="none";
      if(this.nodeInfo==null){
        this.nodeInfo=node;
      }
      this.nodeInfo.isCurrent = false;
      this.nodeInfo = node;
      this.nodeInfo.isCurrent = true;
      console.log(data);
      this.expandKey = [];
      if (data.level == 0) {
        this.tempParent.temppid = data.id;
        this.tempParent.pplabel = data.label;
        this.specific.positionId = "";
        this.specific.departmentId = "";
        this.specific.companyId = data.id;
        this.gobackLevel = 0;
        this.gobacked = false;
        this.gobackId[0] = {
          s: data.id,
          companyValue: data.label
        };
        //给公司赋值之前清空部门和职位的值
        this.departmentValue = "";
        this.positionValue = "";
        this.companyValue = data.label;
        this.companyId = data.id;
        data.children = [];
        console.log("before", data);
        this.department.forEach(val => {
          if (val.pid == data.id) {
            data.children.push({
              level: 1,
              id: val.id,
              pid: val.pid,
              label: val.label,
              plabel: data.label,
              children: [{}]
            });
          }
        });
        console.log("after", data);
      } else if (data.level == 1) {
        this.tempDepartmentData = data;
        this.departmentId = data.id;
        this.specific.companyId = data.pid;
        this.specific.departmentId = data.id;
        this.specific.positionId = "";
        this.gobacked = false;
        this.gobackLevel = 1;
        this.gobackId[1] = {
          s: {
            positionId: "",
            departmentId: data.id,
            companyId: data.pid
          },
          companyValue: data.plabel,
          positionValue: "",
          departmentValue: data.label
        };
        data.children = [];
        this.position.forEach(val => {
          if (val.pid == data.id) {
            data.children.push({
              id: val.id,
              pid: val.pid,
              label: val.label,
              ppid: data.pid,
              plabel: data.label,
              pplabel: data.plabel
            });
          }
        });
        this.companyValue = data.plabel;
        this.positionValue = "";
        this.departmentValue = data.label;
      } else {
        if (this.tempParent.plabel != "") {
          data.ppid = this.tempParent.temppid;
          data.plabel = this.tempParent.plabel;
          data.pplabel = this.tempParent.pplabel;
        }
        this.positionId = data.id;
        this.specific.companyId = data.ppid;
        this.specific.departmentId = data.pid;
        this.specific.positionId = data.id;
        this.gobacked = false;
        this.gobackLevel = 2;
        console.log(this.gobackId);
        this.positionValue = data.label;
        this.departmentValue = data.plabel;
        this.companyValue = data.pplabel;
      }
      this.getSpecificUser();
    },

    /**
     * 获取公司信息
     */
    // getCompany(a) {
    //   console.log("======", a);
    //   this.company = [];
    //   this.$http.get("/company/list", {}).then(res => {
    //     if (res.status == 200) {
    //       res = res.data;
    //       res.forEach((val, key) => {
    //         if (a == undefined) {
    //           this.getDepartment(val.id);
    //         } else {
    //           this.getDepartment(val.id, a);
    //         }
    //         this.company.push({
    //           level: 0,
    //           label: val.name,
    //           id: val.id,
    //           children: []
    //         });
    //       });
    //     }
    //   });
    // },
    /**
     * 获取部门信息
     */
    getDepartment(id, a) {
      this.company[0].children = [];
      this.department = [];
      this.$http
        .get("/department/list", {
          params: {
            companyId: id
          }
        })
        .then(res => {
          if (res.status == 200) {
            res = res.data;
            res.forEach(val => {
              this.company.forEach(v => {
                if (val.companyId == v.id) {
                  this.department.push({
                    level: 1,
                    pid: val.companyId,
                    plabel: v.label,
                    id: val.id,
                    label: val.departmentName
                  });
                  if (a == undefined) {
                    v.children.push({
                      level: 1,
                      pid: val.companyId,
                      plabel: v.label,
                      id: val.id,
                      label: val.departmentName,
                      children: [{}]
                    });
                  } else {
                    v.children.push({
                      level: 1,
                      pid: val.companyId,
                      plabel: v.label,
                      id: val.id,
                      label: val.departmentName,
                      children: []
                    });
                  }
                }
              });
              this.getupDep(val.id);
            });
          }
        });
    },
    /**
     * 根据部门ID获取职位数据
     */
    getupDep(id) {
      this.position = [];
      console.log(this.departmentId);
      if(this.departmentId == null){
        return;
      }
      this.$http
        .get("/position/getupDep", {
          params: {
            departmentId: id
          }
        })
        .then(res => {
          if (res.status == 200) {
            res = res.data;
            res.forEach(val => {
              this.company.forEach(v => {
                v.children.forEach(t => {
                  if (t.id == val.departmentId) {
                    t.children.push({
                      id: val.id,
                      pid: val.departmentId,
                      label: val.positionName
                    });
                  }
                });
              });
              this.position.push({
                id: val.id,
                pid: val.departmentId,
                label: val.positionName
              });
            });
            // console.log("eeeeeeeeeeeee",this.company);
          }
        });
    }
  }
};
</script>

<style scoped lang="scss">
@import "scss_vars";
// .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
//   color: $aside-bg!important;
// }
// .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content:hover {
//  background: $main-bg;
// }
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
  width: 0;
  opacity: 0;
}

#configBox {
  overflow: hidden;
  position: absolute;
  margin-left: 120px;
  top: 80px;
  bottom: 0;
  left: 0;
  right: 0;
  .el-aside {
    border-right:1px solid #eee;
    padding-top: 10px;
    flex: 0 0 200px;
    background: $main-bg;
    height: 100%;
    width: 200px !important;
    overflow-y: auto;
    overflow-x: auto;
    text-align: center;
    img{
                   margin-right: 10px;
                   width: 20px;
                }
    p {
      margin-top: 20px;
      // color: rgba(84, 157, 232, 1);
      color: #b4b4b4;
    }

    .folderTree {
      display: flex;
      align-items: center;
      padding: 10px 0 10px 37px;
      color: #666;
    }
    .folderTree:hover {
      cursor: pointer;
      /*text-decoration:underline;*/
    }
    .is-active {
      color: #549de8;
    }
  }
  .el-main{
    padding: 0!important;
    margin:0 !important;
  }
  .person{
    overflow: auto;
    .toolbar {
      padding: 9px 0 9px 20px;
      height: 36px;
      border-bottom: 1px solid $black-bg;
      margin: 0;
      background-color: $white;
      .el-button {
        height: 36px;
        font-size: 14px;
        font-family: SourceHanSansCN-Regular;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
      }
      .bt1 {
        background: rgba(84, 157, 232, 1);
        color: $white;
      }
      .bt1:focus {
        background: rgba(84, 157, 232, 0.8);
      }
      .bt1:hover {
        background: rgba(84, 157, 232, 0.8);
      }
    }
    .butt1 {
      height: 26px;
      width: 48px;
      padding: 0;
      line-height: 26px;
      font-size: 14px;
      font-family: SourceHanSansCN-Regular;
      font-weight: 400;
      color: $white;
      background: rgba(102, 102, 102, 1);
    }
    .butt1:hover,
    .butt1:focus {
      background: rgba(102, 102, 102, 0.8);
    }
    .butt2 {
      height: 26px;
      width: 48px;
      padding: 0;
      line-height: 26px;
      font-size: 14px;
      font-family: SourceHanSansCN-Regular;
      font-weight: 400;
      color: $white;
      background: rgba(51, 204, 0, 1);
    }
    .butt2:hover,
    .butt2:focus {
      background: rgba(51, 204, 0, 0.8);
    }
    .butt3 {
      height: 26px;
      width: 48px;
      padding: 0;
      line-height: 26px;
      font-size: 14px;
      font-family: SourceHanSansCN-Regular;
      font-weight: 400;
      color: $white;
      background: rgba(84, 157, 232, 1);
    }
    .butt3:hover,
    .butt3:focus {
      background: rgba(84, 157, 232, 0.8);
    }
    .butt4 {
      height: 26px;
      width: 48px;
      padding: 0;
      line-height: 26px;
      font-size: 14px;
      font-family: SourceHanSansCN-Regular;
      font-weight: 400;
      color: $white;
      background: rgba(238, 97, 50, 1);
    }
    .butt4:hover,
    .butt4:focus {
      background: rgba(238, 97, 50, 0.8);
    }
  }
  .network {
    .el-header {
      margin:0;
      padding:0;
      background: #f6f6f6;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f2f2f2;
      height: 54px;
      .addConfig {
      width: 123px;
      height: 36px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
      .el-row {
        display: flex;
        align-items: center;
        .tit {
          line-height: 54px;
          margin-left: 21px;
          padding-left: 20px;
          border-left: 1px solid #f2f2f2;
        }
        .el-button {
          padding: 10px !important;
          width: 82px !important;
        }
        .refresh {
          margin-left: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 42px;
          height: 36px;
        }
      }
    }
    .el-main {
      background: white;
      padding:0;
      .el-table {
        margin-top: 10px;
      }
    }
    .currentSearch {
      width: 180px;
      height: 36px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .folder-box {
      display: flex;
      justify-content: space-between;
    }
    .folder-box-options {
      display: none;
    }
    .folder-box:hover .folder-box-options {
      display: inline-block;
      font-weight: 700;
    }
  }

  .el-header {
    padding: 9px 0 9px 20px !important;
    height: 54px !important;
    border-right: 1px solid $black-bg;
    background: #f6f6f6;
    .folderTree {
      float: left;
      margin-left: 20px;
      padding: 10px;
      /*text-decoration: underline;*/
    }
    .folderTree:hover {
      cursor: pointer;
    }
    .is-active {
      color: #549de8;
    }
    .el-button {
      padding: 10px;
      width: 82px;
      float: left;
    }
    .refresh {
      float: right;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 42px;
      height: 36px;
      margin-right: 20px;
    }
  }
}
#box,
#edit {
  .search {
    margin: 10px 0;
    display: flex;
    justify-content: center;
    .label {
      align-self: center;
    }
    .choose {
      display: flex;
      width: 50px;
      align-self: center;
      justify-content: flex-end;
    }
  }
  .s2 {
    width: 528px;
  }
  .l1 {
    .el-input__inner {
      width: 180px;
    }
  }
  .author {
    .el-radio-group {
      display: flex;
      justify-content: space-around;
      align-items: center;
      line-height: 40px;
    }
  }
  .addInput {
    width: 100%;
  }
  .btn {
    display: flex;
    margin-top: 20px;
    padding: 0 150px;
    justify-content: space-between;
  }
}
.block {
  display: flex;
  margin-top: 40px;
  margin-bottom: 20px;
  .smallBtn {
    margin: 0 20px;
    width: 25%;
  }
}
#testRight,
#Right {
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  z-index: 100;
  font-size: 13px;
  border-radius: 5px;
  font-family: "Microsoft YaHei", arial, SimSun, 宋体;
  color: #5b667b;
  border: 1px solid #dde0e4;
  box-shadow: 0 0 8px $black-high;
  background: $white;
  text-align: center;
  cursor: pointer;
  font-family: SourceHanSansCN-Regular;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 30px;
  li {
    width: 100%;
    padding: 8px 0;
    margin: 3px 0;
    line-height: 13px;
    white-space: nowrap;
    text-indent: 5px;
    display: block;
    i {
      margin-right: 5px;
    }
  }
  li:hover {
    background-color: #4281f4;
    color: $white;
  }
}
/deep/
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  color: #549de8 !important;
}
</style>
<style lang="scss">
#configBox{
  @import "scss_vars";
  .el-tree {
      margin: 30px 0;
      width: 300px;
    }
    .el-tree-node__content:hover {
      background-color: $main-bg!important;
    }
    .el-tree-node__content:active {
      color: rgba(84, 157, 232, 1)!important;
      background-color: $main-bg!important;
    }
    .el-tree-node:focus>.el-tree-node__content {
      color: rgba(84, 157, 232, 1)!important;
      background-color: $main-bg!important;
    }
}
</style>
